<template>
	<div>
		<!-- 全部订单-退费订单详情 -->
		<div class="allorders_refund_details">
			<!-- 课程、商品、订金退费 -->
			<div>
				<div class="row">
					<span class="title">退款详情</span>
				</div>
				<div class="row table">
					<div class="table" style="width:100%;">
						<template >
							<el-table
								:data="tableData"
								stripe
								style="width: 100%;font-size:0.16rem;"
								>
								<el-table-column
								align="center"
								width="200"
								prop="p_orderNo"
								label="订单号">
								</el-table-column>
								<el-table-column
								align="center"
								width="50"
								label="">
									<template slot-scope="scope">
										<div class="orderTypeSymbol" :type="scope.row.p_ordertype" v-if="scope.row.p_ordertype==1">课</div>
										<div class="orderTypeSymbol" :type="scope.row.p_ordertype" v-else-if="scope.row.p_ordertype==2">商</div>
										<div class="orderTypeSymbol" :type="scope.row.p_ordertype" v-else-if="scope.row.p_ordertype==3">订</div>
										<div class="orderTypeSymbol" :type="scope.row.p_ordertype" v-else-if="scope.row.p_ordertype==4">餐</div>
									</template>
								</el-table-column>
								<el-table-column
								align="center"
								width="150"
								prop="p_orderName"
								label="课程/商品/订金">
								</el-table-column>
								<el-table-column
								align="center"
								label="单价">
									<template slot-scope="scope">
										<span v-show="scope.row.p_unitPrice===0||(scope.row.p_unitPrice)"
										>￥{{scope.row.p_unitPrice}}</span>
									</template>
								</el-table-column>
								<el-table-column
								align="center"
								prop="p_unit"
								label="单位">
								</el-table-column>
								<el-table-column
								align="center"
								prop="p_buyNumber"
								label="购买数量">
								</el-table-column>
								<el-table-column
								align="center"
								prop="p_payModeName"
								label="支付方式">
								</el-table-column>
								<el-table-column
								align="center"
								label="合计">
									<template slot-scope="scope">
										<span v-show="scope.row.p_totalMoney===0||(scope.row.p_totalMoney)"
										>￥{{scope.row.p_totalMoney}}</span>
									</template>
								</el-table-column>
								<el-table-column
								align="center"
								label="优惠金额">
									<template slot-scope="scope">
										<span v-show="scope.row.p_discountMoney===0||(scope.row.p_discountMoney)"
										>￥{{scope.row.p_discountMoney}}</span>
									</template>
								</el-table-column>
								<el-table-column
								align="center"
								prop="p_discountName"
								label="优惠名称">
								</el-table-column>
								<el-table-column
								align="center"
								label="实际支付">
									<template slot-scope="scope">
										<span v-show="scope.row.p_realPayMoney===0||(scope.row.p_realPayMoney)"
										>￥{{scope.row.p_realPayMoney}}</span>
									</template>
								</el-table-column>
								<el-table-column
								align="center"
								prop="p_refundNumber"
								label="退费数量">
								</el-table-column>
								<el-table-column
								align="center"
								label="应退费">
									<template slot-scope="scope">
										<span v-show="scope.row.p_shouldRefundMoney===0||(scope.row.p_shouldRefundMoney)"
										>￥{{scope.row.p_shouldRefundMoney}}</span>
									</template>
								</el-table-column>
								<!-- <el-table-column
								align="center"
								label="实际退费">
									<template slot-scope="scope">
										<div style="display: flex;flex-wrap: wrap;justify-content: center;"
										 v-if="scope.row.p_shouldRefundMoney!=scope.row.p_realRefundMoney">
											<span v-show="scope.row.p_realRefundMoney===0||(scope.row.p_realRefundMoney)"
											 style="margin-right:0.05rem;white-space: nowrap;">￥{{scope.row.p_realRefundMoney}}</span>
											<el-tooltip class="item" effect="dark" content="退费原因" placement="bottom">
												<div class="orderTypeSymbol" :type="1">改</div>
											</el-tooltip>
											<div class="orderTypeSymbol" :type="1">改</div>
										</div>
										<div v-else>
											<span v-show="scope.row.p_realRefundMoney===0||(scope.row.p_realRefundMoney)"
											>￥{{scope.row.p_realRefundMoney}}</span>
										</div>
									</template>
								</el-table-column> -->
							</el-table>
						</template>
					</div>
					<div class="statisticsBox" style="margin-top: 0.1rem;">
						<div class="item primary" style="margin-top:0.1rem;display: flex;justify-content: flex-end;align-items: flex-end;">
							<span class="label">应退费：</span>
							<span class="value" style="margin:0 0.05rem;">￥{{tableStatistics.totalMoney}}</span>
						</div>
						<div class="item actual" style="margin-top:0.1rem;display: flex;justify-content: flex-end;align-items: flex-end;">
							<span class="label">实际退费：</span>
							<span class="value" style="margin:0 0.05rem;">￥{{tableStatistics.realMoney}}</span>
							<div class="orderTypeSymbol" v-if="tableStatistics.totalMoney!=tableStatistics.realMoney" :type="1">改</div>
						</div>
					</div>
				</div>
				<!-- <div class="row line"></div> -->
				<div class="row" style="margin-top:0.16rem;">
					<span class="otherinfo">退款进度</span>
				</div>
				<div class="row" style="height:auto;margin-bottom:0.16rem;margin-top:0.1rem;">
					<div class="box-progress">
						<el-steps style="width: 8.62rem;" :active="3" finish-status="success" align-center>
							<el-step title="发起退款" :description="progressInfo.step1.time+'\n发起退费：'+progressInfo.step1.name"></el-step>
							<el-step title="退款审核" :description="progressInfo.step2.time+'\n审核操作：'+
							progressInfo.step2.name+(progressInfo.step2.money?('\n修改金额：￥'+progressInfo.step2.money):'')"></el-step>
							<el-step title="已退费" :description="progressInfo.step3.time+'\n退费操作：'+progressInfo.step3.name"></el-step>
						</el-steps>
					</div>
				</div>
				<div class="row">
					<span class="otherinfo">其他信息</span>
				</div>
				<div class="row">
					<div class="txtbox alignCenterBox" style="width:100%;">
						<span class="label">退款订单号：</span>
						<span class="value">{{otherInfo.orderNo}}</span>
					</div>
				</div>
				<div class="row">
					<div class="txtbox alignCenterBox" style="width:100%;">
						<span class="label">第三方订单号：</span>
						<span class="value">{{otherInfo.otherOrderNo}}</span>
					</div>
				</div>
				<div class="row">
					<div class="txtbox alignCenterBox" style="width:100%;">
						<span class="label">状态：</span>
						<span class="value">{{otherInfo.statu}}</span>
					</div>
				</div>
				<!-- <div class="row">
					<div class="txtbox alignCenterBox" style="width:100%;">
						<span class="label">支付方式：</span>
						<span class="value">{{otherInfo.payMode}}</span>
					</div>
				</div> -->
				<div class="row">
					<div class="txtbox alignCenterBox" style="width:100%;">
						<span class="label">跟单人：</span>
						<span class="value">{{otherInfo.executeUserName}}</span>
					</div>
				</div>
				<div class="row">
					<div class="txtbox alignCenterBox" style="width:100%;">
						<span class="label">退费操作：</span>
						<span class="value">{{otherInfo.createUserName}}</span>
					</div>
				</div>
				<div class="row">
					<div class="txtbox alignCenterBox" style="width:100%;">
						<span class="label">退费方式：</span>
						<span class="value">{{otherInfo.refundModeName}}</span>
					</div>
				</div>
				<div class="row">
					<div class="txtbox alignCenterBox" style="width:100%;">
						<span class="label">退费原因：</span>
						<span class="value">{{otherInfo.mark}}</span>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	let vm;
	export default{
		data(){
			return {
				/**学员信息 */
				studentInfo:{
					studentName:'',
					parentName:'',
					phoneNumber:'',
					createTime:'',
					orderNo:'',
				},
				/**表格数据 */
				tableData:[],
				tableStatistics:{
					totalMoney:0,
					realMoney:0
				},
				progressInfo:{
					step1:{
						time:'---',
						name:'---'
					},
					step2:{
						time:'---',
						name:'---',
						money:0
					},
					step3:{
						time:'---',
						name:'---'
					},
				},
				/**其他信息 */
				otherInfo:{
					orderNo:'',
					otherOrderNo:'',
					statu:'',
					payMode:'',
					createUserName:'',
					executeUserName:'',
					mark:''
				},
			}
		},
		methods:{
			/**初始化 */
			updateByData(data){
				this.studentInfo=data.studentInfo;
				this.tableData=data.tableData;
				this.tableStatistics=data.tableStatistics;
				this.otherInfo=data.otherInfo;
				if(data.progressInfo){
					this.progressInfo=data.progressInfo;
				}
			},
		},
		mounted(){
		},
		computed:{
			
		},
		watch:{

		},
		created : function() {
			vm=this;
		}
	}
</script>

<style lang="scss">
	.allorders_refund_details{
		padding: 0 0.04rem 0.2rem 0.04rem;
		font-size: 0.16rem;
		// color: #333333;
		.row{
			width: 100%;
			display: flex;
    		margin-top: 0.1rem;
			.title{
				font-size: 0.18rem;
				color: #333333;
				font-weight: bold;
			}
			.otherinfo{
				font-size: 0.18rem;
				color: #333333;
				font-weight: bold;
			}
			.txtbox{
				min-width: 25%;
				.label{

				}
				.value{

				}
			}
			.alignCenterBox{
				.label{
					width: 1.25rem;
					text-align: right;
					display: inline-block;
				}
			}
			.table{
				.el-table__header-wrapper{
					.el-table__header thead{
						color: #666666 !important;
						font-size: 0.16rem !important;
					}
				}
				.el-table__body-wrapper{
					.el-table__row{
						.cell{
							white-space: pre-line !important;
							font-size: 0.16rem !important;
						}
					}
					.cloumn-type{
						.type{
							display: block;
							height: 0.2rem;
							line-height: 0.2rem;
							font-size: 0.12rem;
							background-color: #3885F8;
							color: white;
							border-radius: 0.05rem;
							width: 0.35rem;
							padding: 0 0.05rem;
							text-align: center;
						}
					}
				}
			}
			.statisticsBox{
				width: 100%;
				text-align: right;
				font-size: 0.18rem;
				.primary{
					// font-size: 0.16rem;
				}
				.actual{
					.value{
						font-size: 0.26rem;
    					color: #fc7301;
						font-weight: 600;
					}
				}
				.deposit{
					// font-size: 0.14rem;
				}
				.item{
					.label{
						display: inline-block;
						width: 0.9rem;
						text-align: right;
					}
					.value{
						display: inline-block;
						min-width: 1.5rem;
						text-align: left;
					}
				}
			}
		}
		.row.line{
			width: 100%;
			height: 0.01rem;
			border-top: 0.005rem solid #6666667d;
		}
		.row.table{
			flex-wrap: wrap;
		}
		.box-progress{
			height: 150px;
			width: 100%;
			display: flex;
			align-items: center;
			background-color: #fafafa;
			.el-step__description{
				white-space: pre;
			}
			.el-step__title.is-success{
				color: #666666 !important;
				font-size: 0.18rem !important;
			}
			.el-step__description.is-success{
				color: #999999 !important;
				font-size: 0.14rem !important;
			}
			.el-step__head.is-success{
				color: #5cc775 !important;
				border-color: #5cc775 !important;
			}
			.el-step__line-inner{
				border-width:0.015rem !important;
			}
		}
		// 滚动条
		.el-table__body-wrapper::-webkit-scrollbar {
			width: 0.05rem;
		}
		.el-table__body-wrapper::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.el-table__body-wrapper::-webkit-scrollbar-track {
			background: #F2F6FC;
		}

		
	}
	// 滚动条
	// .allorders_refund_details::-webkit-scrollbar {
	// 	width: 0.05rem;
	// }
	// .allorders_refund_details::-webkit-scrollbar-thumb {
	// 	border-radius: 0.5rem;
	// 	background: #BBBBBB;
	// }
	// .allorders_refund_details::-webkit-scrollbar-track {
	// 	background: #F2F6FC;
	// }
</style>